<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复兴豆芽厂统计汇总</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="./jquery.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<style>
    .smart-green {
        margin-left: auto;
        margin-right: auto;
        max-width: 700px;
        background: #9DC45F;

        font: 12px Arial, Helvetica, sans-serif;
        color: #666;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }

    .button {
        background-color: #9DC45F;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-border-radius: 5px;
        border: none;
        padding: 10px 10px 10px 10px;
        color: #FFF;
        text-shadow: 1px 1px 1px #949494;
        width: 100px;
        height: 50px;
        text-align: center;
        font-size: large;
    }
    .smallBut{
        width: 50px;
        height: 50px;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        font: 12px Arial, Helvetica, sans-serif;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    }

    th,
    td {
        padding: 10px 5px 10px 5px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    th {
        background-color: #f2f2f2;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    tr:hover {
        background-color: #ddd;
    }
    .longtd{
        width: 50px;
    }
    .ui-datepicker {
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }
    .ui-datepicker table {
        font-size: 0.875rem;
    }
    .ui-datepicker-header {
        background-color: #007bff;
        color: #fff;
    }

</style>
<script>
    $(function () {
        $("#startDate").datepicker({
            dateFormat: 'yy-mm-dd', dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            prevText: "上月",
            nextText: "下月",
            closeText: "关闭"
        });
        $("#endDate").datepicker({
            dateFormat: 'yy-mm-dd', dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            prevText: "上月",
            nextText: "下月",
            closeText: "关闭"
        });
        var currentDate = new Date();
        var year = currentDate.getFullYear();
        var month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
        var day = ('0' + currentDate.getDate()).slice(-2);
        $('#startDate').val(year + '-' + month + '-' + day);
        $('#endDate').val(year + '-' + month + '-' + day);
        $("#startDate").on('change keyup', function () {
            $('#myTbody').empty();
            changeValue();
        });
        $("#endDate").on('change keyup', function () {
            $('#myTbody').empty();
            changeValue();
        });
        $('#goCalc').click(function () {
            window.location.href = '/';
        });
        changeValue();
        function changeValue() {
            var startDate = $("#startDate").val();
            var endDate = $("#endDate").val();
            $.ajax({
                url: "statisticsOrderByDate?startDate="+startDate+"&endDate="+endDate, dataType: "json", success: function (result) {
                    var list = result.orders;
                    for (let i = 0; i < list.length; i++) {
                        $("#dataTable tbody").append("<tr>" +
                            "<td>"+list[i].salesmanName + "</td>" +
                            "<td>"+list[i].beanWeight + "</td>" +
                            "<td>"+list[i].beanTotalPrice + "</td>" +
                            "<td>"+list[i].litterBeanWeight + "</td>" +
                            "<td>"+list[i].litterBeanTotalPrice + "</td>" +
                            "<td>"+list[i].totalPrice + "</td>" +
                           "</tr>");
                    }
                }
            });
        }
    });


</script>
<body>
<div class="smart-green">
    <input class="button" id="startDate" value="开始日期"/>
    <input class="button" id="endDate" value="结束日期"/>
    <input class="button smallBut" id="goCalc" value="返回"/>
</div>
<table id="dataTable">
    <thead>
    <tr><th class="longtd">姓名</th><th>豆芽重量</th><th>豆芽总价</th><th>芽了重量</th><th>芽了总价</th><th>总价</th></tr>
    </thead>
    <tbody id="myTbody">
    </tbody>

</table>

</body>
</html>